<template>
    <div class="pageContent">
        <div class="tableTitle">
            <div class="tableIcon"><img src="@/assets/img/flower_brown.png"></div>
            <div class="tableText">预约信息</div>
        </div>
        <div class="bgBox">
            <!-- <div class="infosBox">
                <div v-for="(item, index) in seeDetailTemplate" :key="index" class="columns">
                    <span class="label">{{item.label}}：</span><span class="value">{{translateData(item)}}</span>
                </div>
            </div> -->
            <div class="infosBox">
                <div class="columns">
                    <span class="label">预约单号：</span><span class="value">{{translateData('reservationNumber')}}</span>
                </div>
                <div class="columns">
                    <span class="label">预约状态：</span><span class="value">{{translateData('bookingStatus')}}</span>
                </div>
            </div>
            <div class="infosBox">
                <div class="columns">
                    
                </div>
                <div class="columns">
                    <span class="label">预约地区：</span><span class="value">{{translateData('area')}}</span>
                </div>
                <div class="columns">
                    <span class="label">预约门店：</span><span class="value">{{translateData('shop')}}</span>
                </div>
                <div class="columns">
                    <span class="label">预约日期：</span><span class="value">{{translateData('reservationDate')}}  {{translateData('reservationTime')}}</span>
                </div>
            </div>
            <div class="infosBox larger_space">
                <div class="columns">
                    
                </div>
                <div class="columns">
                    <span class="label">创建日期：</span><span class="value">{{translateData('createDate')}}</span>
                </div>
                <div class="columns">
                    <span class="label">创建时间：</span><span class="value">{{translateData('createTime')}}</span>
                </div>
                <div class="columns">
                    <span class="label">创建人：</span><span class="value">{{translateData('createUser')}} {{translateData('jobNo')}}</span>
                </div>
            </div>
            <div class="infosBox">
                <div class="columns">
                    <span class="label">预约人：</span><span class="value">{{translateData('name')}}</span>
                </div>
                <div class="columns">
                    <span class="label">计划购买时间：</span><span class="value">{{translateData('planBuyTime')}}</span>
                </div>
                <div class="columns">
                    <span class="label">手机号：</span><span class="value">{{translateData('phone')}}</span>
                </div>
                <div class="columns">
                    <span class="label">性别：</span><span class="value">{{translateData('sex')}}</span>
                </div>
            </div>
            <div class="infosBox">
                <div class="columns">
                    
                </div>
                <div class="columns">
                    <span class="label">邮箱：</span><span class="value">{{translateData('email')}}</span>
                </div>
                <div class="columns">
                    <span class="label">联系地址：</span><span class="value">{{translateData('address')}}</span>
                </div>
                <div class="columns">
                    <span class="label">详细地址：</span><span class="value">{{translateData('detailedAddress')}}</span>
                </div>
            </div>
            <div class="infosBox larger_space">
                <div class="columns">
                    <span class="label">到店人：</span><span class="value">{{translateData('arrivalName')}}</span>
                </div>
                <div class="columns">
                    <span class="label">到店人手机号：</span><span class="value">{{translateData('arrivalPhone')}}</span>
                </div>
                <div class="columns">
                    <span class="label">到店人性别：</span><span class="value">{{translateData('arrivalSex')}}</span>
                </div>
            </div>
            <div class="infosBox">
                <div class="columns">
                    <span class="label">预约来源：</span><span class="value">{{translateData('source')}}</span>
                </div>
                <div class="columns">
                    <span class="label">推广来源：</span><span class="value">{{translateData('promotionSource')}}</span>
                </div>
            </div>
            <div class="infosBox">
                <div class="columns">
                    
                </div>
                <div class="columns" style="width: 50%;">
                    <span class="label">网站来源：</span><span class="value" :title="translateData('websiteSource')">{{translateData('websiteSource')}}</span>
                </div>
            </div>
            <div class="infosBox larger_space">
                <div class="columns">
                    <span class="label">审核状态：</span><span class="value">{{translateData('status')}}</span>
                </div>
                <div class="columns">
                    <span class="label">审核客服：</span><span class="value">{{translateData('reviewCustomerName')}}</span>
                </div>
            </div>
            <div class="infosBox">
                <div class="columns"> 
                    <span class="label">跟进客服：</span><span class="value">{{translateData('followUpCustomerName')}}</span>
                </div>
                <div class="columns">
                    <span class="label">客户标签（客服）：</span><span class="value">{{translateData('checkTagGroupCustomer')}}</span>
                </div>
            </div>
            <div class="infosBox">
                <div class="columns">
                    <span class="label">跟进店员：</span><span class="value">{{translateData('supportStaff')}}</span>
                </div>
                <div class="columns">
                    <span class="label">客户标签（门店）：</span><span class="value">{{translateData('checkTagGroupShop')}}</span>
                </div>
            </div>
            <div class="infosBox" style="margin-bottom: 0;">
                <div class="columns">
                    <span class="label">是否到店：</span><span class="value">{{translateData('isArrival')}}</span>
                </div>
                <div class="columns">
                    <span class="label">是否成交：</span><span class="value">{{translateData('isDeal')}}</span>
                </div>
            </div>
        </div>
        <div class="tableTitle">
            <div class="tableIcon"><img src="@/assets/img/flower_brown.png"></div>
            <div class="tableText">备注历史</div>
        </div>
        <div class="bgBox">
            <div style="padding-bottom: 8px;">
                <div class="logCan" v-for="(item, index) in memo1" :key="index">
                    <div class="Time_Name">
                        <div>{{item.createTime}}</div>
                        <div style="margin-top: 1rem;">店员：{{item.supportStaff}}</div>
                    </div>
                    <div class="memoContent">
                        {{item.content}}
                    </div>
                </div>
                <div v-if="!memo1.length" style="font-size: 14px;">
                    未备注
                </div>
            </div>
        </div>
        <div class="tableTitle">
            <div class="tableIcon"><img src="@/assets/img/flower_brown.png"></div>
            <div class="tableText">客服跟进历史</div>
        </div>
        <div class="bgBox">
            <div style="padding-bottom: 8px;">
                <div class="logCan" v-for="(item, index) in memo2" :key="index">
                    <div class="Time_Name">
                        <div>{{item.createTime}}</div>
                        <div style="margin-top: 1rem;">客服：{{item.supportStaff}}</div>
                    </div>
                    <div class="memoContent">
                        <p style="margin-bottom: 8px;" v-for="(ele, index) in item.content.split(',')" :key="index">{{ele}}</p>
                        <p style="margin-bottom: 8px;" v-if="item.followUpDetail">{{item.followUpDetail}}</p>
                    </div>
                </div>
                <div v-if="!memo2.length" style="font-size: 14px;">
                    未跟进
                </div>
            </div>
        </div>
        <div class="tableTitle">
            <div class="tableIcon"><img src="@/assets/img/flower_brown.png"></div>
            <div class="tableText">门店跟进历史</div>
        </div>
        <div class="bgBox">
            <div style="padding-bottom: 8px;">
                <div class="logCan" v-for="(item, index) in memo3" :key="index">
                    <div class="Time_Name">
                        <div>{{item.createTime}}</div>
                        <div style="margin-top: 1rem;">店员：{{item.supportStaff}}</div>
                    </div>
                    <div class="memoContent" v-if="item.content">
                        <p style="margin-bottom: 8px;" v-for="(ele, index) in item.content.split(',')" :key="index">{{ele}}</p>
                        <p style="margin-bottom: 8px;" v-if="item.followUpDetail">{{item.followUpDetail}}</p>
                    </div>
                </div>
                <div v-if="!memo3.length" style="font-size: 14px;">
                    未跟进
                </div>
            </div>
        </div>
        <div class="tableTitle">
            <div class="tableIcon"><img src="@/assets/img/flower_brown.png"></div>
            <div class="tableText">门店接待信息</div>
        </div>
        <div class="tailBox">
            <div class="treatInfo">
                <div class="parts" style="width: 50%;">
                    <p class="itemss">
                        <span>接待店员：</span><span>{{detailData.receptShoperName}}</span>
                    </p>
                    <p class="itemss">
                        <span>到店时间：</span><span>{{detailData.arrivalTime}}</span>
                    </p>
                    <div v-if="detailData.isDeal" class="itemss" style="display: flex;">
                        <div style="width: 60px;">订单号：</div><div class="ellipsis" :title="detailData.orderId">{{detailData.orderId}}</div>
                    </div>
                    <p v-else class="itemss">
                        <span>未成交原因：</span><span>{{detailData.notDealReason}}</span>
                    </p>
                </div>
            </div>
            <p v-if="!detailData.isDeal" class="itemss">
                <span style="color: #8C8C8C;">未成交说明：</span><span style="color: #272727;">{{detailData.notDealDescription}}</span>
            </p>
            <p class="itemss">
                <span style="color: #8C8C8C;">赠送礼品：</span><span style="color: #272727;">{{detailData.gift || '无'}}</span>
            </p>
        </div>
        <div class="btnBox">
            <div class="btn" @click="goBack">关闭</div>
        </div>
    </div>
</template>
<script>
    import datas from './datas.js'
    import { getDetailPure, getPlanTime, getResource } from './axios.js'
    export default {
        name: 'seeDetail',
        data() {
            return {
                seeDetailTemplate: datas.seeDetailTemplate,
                detailData: {},
                memo1: [],
                memo2: [],
                memo3: [],
                planTimeArr: [],
                sourceList: []
            }
        },
        props: {
            pathName: {
                type: String,
                required: true
            }
        },
        components: {
            
        },
        methods: {
            // 转义门店跟进历史
            translateHistory(item) {
                return item
            },
            // 转义基础信息
            translateData(item) {
                let res = '';
                switch (item) {
                    case 'planBuyTime':
                        this.planTimeArr.length && this.planTimeArr.map(ele => {
                            ele.key == this.detailData[item] && (res = ele.value)
                        })
                        break;
                    case 'reservationDate':
                        this.detailData.reservationStartTime && (res = this.detailData['reservationStartTime'].split(' ')[0])
                        break;
                    case 'reservationTime':
                        this.detailData.reservationStartTime 
                        && this.detailData.reservationEndTime 
                        && (res = `${this.detailData.reservationStartTime.split(' ')[1]}-${this.detailData.reservationEndTime.split(' ')[1]}`)
                        break;
                    case 'status':
                        datas.statusList.map(ele => {
                            ele.value == this.detailData[item] && (res = ele.label)
                        })
                        break;
                    case 'bookingStatus':
                        datas.bookList.map(ele => {
                            ele.value == this.detailData[item] && (res = ele.label)
                        })
                        break;
                    case 'followUpCustomerName':
                        let memos = []
                        if(Array.isArray(this.detailData.followUpRecords)){
                            this.detailData.followUpRecords.forEach(ele => {
                                if(ele.type === 2) {
                                    memos.push(ele)
                                }
                            })
                        }
                        memos.length ? res = memos[0].supportStaff : res = ''
                        break;
                    case 'jobNo':
                        res = this.detailData.jobNo ? `${this.detailData.jobNo}` : ''
                        if(this.detailData.jobNo == '-9999') {
                            res = ''
                        }
                        break;
                    case 'isArrival':
                        res = this.detailData[item] ? '是' : '否'
                        if(this.detailData[item] == undefined) {
                            res = ''
                        }
                        break;
                    case 'isDeal':
                        res = this.detailData[item] ? '是' : '否'
                        if(this.detailData[item] == undefined) {
                            res = ''
                        }
                        break;
                    case 'createDate':
                        if(!this.detailData.createTime) {
                            res = ''
                        }else {
                            res = this.detailData.createTime.split(' ')[0]
                        }
                        break;
                    case 'createTime':
                        if(!this.detailData.createTime) {
                            res = ''
                        }else {
                            res = this.detailData.createTime.split(' ')[1]
                        }
                        break;
                    default: 
                        res = this.detailData[item]
                        break;
                }
                return res
            },
            goBack() {
                this.$router.replace({name: this.pathName})
            }
        },
        async mounted() {
            // 计划购买时间
            let planTime = await getPlanTime()
            if(planTime.data.status === 200) {
                this.planTimeArr = planTime.data.result
            }
            // 预约来源
            let sourceList = await getResource()
            if(sourceList.status === 200) {
                this.sourceList = sourceList.data.result
            }
        },
        async activated() {
            let id = this.$route.query.searchKey
            let res = await getDetailPure(id);
            if(res.data.status === 200) {
                this.detailData = res.data.result;
                let memosList = res.data.result.followUpRecords;
                let memo1 = [], memo2 = [], memo3 = [];
                Array.isArray(memosList) && memosList.map(ele => {
                    ele.type === 1 && memo1.push(ele);
                    ele.type === 2 && memo2.push(ele);
                    ele.type === 3 && memo3.push(ele);
                })
                this.memo1 = memo1;
                this.memo2 = memo2;
                this.memo3 = memo3;
                console.log(memo2, 'memo3')
            }else {
                this.$message({
                    message: '获取详情信息失败',
                    type: 'error'
                })
            }
        }
    }
</script>
<style scoped>
    .tableTitle{
        height: 4rem;
        display: flex;
        align-items: center;
        flex-direction: row;
        justify-content: flex-start;
        background: #FFF;
    }
    .tableIcon{
        width: .4rem;
        margin-left: 1rem;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .tableText{
        height: 100%;
        line-height: 4rem;
        margin-left: 0.4rem;
        font-size: 14px;
        font-weight: bold;
        color: #715D4A;
    }
    .ellipsis{
        flex: 1;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
    .pageContent{
        padding: 16px;
    }
    .bgBox{
        background: #FFF;
        padding: 0 2.4rem;
    }
    .tailBox{
        background: #FFF;
        padding: 0 2.4rem;
        font-size: 14px;
        /* display: flex; */
    }
    .infosBox{
        width: 100%;
        
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
    }
    .infosBox>.columns{
        width: 25%;
        margin-bottom: 16px;
        min-width: 25rem;
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .columns>.label{
        display: inline-block;
        height: 16px;
        color: #8C8C8C;
    }
    .columns>.value{
        display: inline-block;
        height: 16px;
        color: #272727;
    }
    .larger_space{
        margin-bottom: 20px;
    }
    .logCan{
        width: 90%;
        display: flex;
        font-size: 14px;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        margin-bottom: 4px;
    }
    .memoContent{
        margin-left: 4rem;
    }
    .Time_Name{
        color: #8C8C8C;
    }
    .Time_Name div{
        text-align: right;
    }
    .parts{
        width: 30%;
        min-width: 20rem;
        display: flex;
        flex-direction: column;
        font-size: 14px;
        color: #8C8C8C;
    }
    .itemss{
        padding-bottom: 2rem;
    }
    .itemss span:nth-child(2) {
        color: #222222;
    }
    .btnBox{
        height: 6rem;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #FFF;
    }
    .btn{
        display: inline-block;
        width: 120px;
        font-size: 14px;
        height: 40px;
        border-radius: 20px;
        text-align: center;
        line-height: 40px;
        background: #7E6B5A;
        color: #FFF;
        cursor: pointer;
        margin: 0 8px;
    }
    .treatInfo{
        width: 100%;
        min-width: 500px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
</style>